<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="root">

    </div>
</body>
<script src="../react@17.js"></script>
<script src="../react-dom@17.js"></script>
<script src="../babel.js"></script>
<script type="text/babel">
    class App extends React.Component {
        constructor() {
            super();
            this.state = {
                provinceArray: [
                    {
                        provinceName: "河南省",
                        cityList: [
                            {
                                cityName: "郑州市",
                                areaList: ["高新区", "中原区", "金水区", "二七区"]
                            }, {
                                cityName: "安阳市",
                                areaList: ["文峰区", "北关区", "开发区", "汤阴县", "安阳县"]
                            }, {
                                cityName: "新乡市",
                                areaList: ["红旗区", "原阳县", "新乡新区"]
                            }
                        ]
                    },
                    {
                        provinceName: "福建省",
                        cityList: [
                            {
                                cityName: "福州市",
                                areaList: ["滨海区", "吴岩区"]
                            }, {
                                cityName: "厦门市",
                                areaList: ["集美区", "翔安区", "思明区"]
                            }
                        ]
                    }
                ],
                //  当前选中省份所对应的索引
                proviceIndex:0,
                //当前选中城市所对应的索引
                cityIndex:0,
                // 当前选中区的索引
                areaIndex:0
            }
        }
        render() {
            let {provinceArray,proviceIndex,cityIndex,areaIndex} = this.state;
            return (
                <div>
                    {
                        //渲染省份
                    }
                    <select onChange={(e)=>this.getProvinceIndex(e)}>
                        {
                            provinceArray.map((item,index)=>{
                                return <option value={index} key={index}>{item.provinceName}</option>
                            })
                        }
                    </select>
                    {
                        // 渲染市
                    }
                    <select value={cityIndex} onChange={(e)=>this.getCityIndex(e)}>
                        {   provinceArray[proviceIndex].cityList.map((item,index)=>{
                                return <option value={index} key={index}>{item.cityName}</option>
                        })
                        }    
                    </select>
                    {
                        // 渲染县区
                    }
                    <select value={areaIndex} onChange={(e)=>{
                        this.setState({
                            areaIndex:e.target.value
                        })
                    }}>
                        {
                            provinceArray[proviceIndex].cityList[cityIndex].areaList.map((item,index)=>{
                                return <option value={index} key={index}>{item}</option>
                            })
                        }
                    </select>
                </div>
            )
        }
        // 获取当前所选中省份的索引
        getProvinceIndex(e){
            this.setState({
                proviceIndex:e.target.value,
                cityIndex:0
            })
        }
        getCityIndex(e){
            this.setState({
                cityIndex:e.target.value,
                areaIndex:0
            })
        }
    }
    ReactDOM.render(<App />, document.getElementById("root"))
</script>

</html>